Skip to content

Reinstate modern light dark - #15

Merged
srcdev merged 8 commits into
mainfrom
reinstate-modern-light-dark
Jun 11, 2026
Merged

Reinstate modern light dark#15
srcdev merged 8 commits into
mainfrom
reinstate-modern-light-dark

Conversation

@srcdev

@srcdev srcdev commented Jun 11, 2026

Copy link
Copy Markdown
Owner

Parametric colour ramp system + semantic theme alignment

Summary

  • Replaces hardcoded light/dark CSS blocks with a parametric oklch ramp system. Each named palette (blue, red, green, amber, etc.) is now generated from ramps.config.mjs — hue, chroma, and 11 fixed lightness steps — eliminating hundreds of hand-authored colour values and making the entire system consistent and auditable.

  • Semantic theme slots (--theme-surface, --theme-text, --theme-border, etc.) now use light-dark() to pick the correct ramp step automatically. Components no longer hardcode positional ramp values — they reference semantic slots and respond to light/dark mode correctly.

  • Consumer ramp generator (scripts/generate-consumer-ramps.mjs) lets downstream apps generate a matching custom-branded ramp from a single hue/chroma config, with a check-ramps CI guard to catch drift.

  • DisplayPrompt and DisplayToast aligned to a shared SemanticTheme type ("info" | "success" | "warning" | "error"), dropping the non-semantic variants that had no CSS backing. Both components now theme correctly in light and dark mode. DisplayPromptCore renamed to DisplayPrompt and moved to 01.atoms/prompt/; toast moved to 01.atoms/toast/. Broken DisplayPromptError variant deleted.

  • 64 Vitest tests added across both display components, including a fix for a real slot-forwarding bug discovered during test authoring.

Test plan

  • Toggle light/dark mode — all four semantic themes (info/success/warning/error) render with correct colours in both modes across DisplayPrompt and DisplayToast
  • Trigger a toast — verify show/hide animation, progress bar, auto-dismiss, and close button
  • Dismiss a DisplayPrompt — verify collapse animation (local dismiss) and v-model emit path
  • Run npm run test:run — all tests pass
  • Run npm run generate:ramps — output files are unchanged (no drift)
  • Check app/pages/ui/display-prompt and app/pages/ui/display-toast demo pages render correctly

srcdev added 7 commits June 9, 2026 21:04
@srcdev
Mask element - add demo error toast pattern
f6a889e
@srcdev
DisplayToast - Update to modern props setup
3b32cc3
@srcdev
refactor: Themes - Remove hard coded values and replace with colour r…
4957671 
…amps
@srcdev
refactor: Themes - Create consumer ramp generator
a57b23b
@srcdev
refactor: Themes - Correct misleading instructions within consumer th…
d0a5f63 
…eme css generation
@srcdev
refactor: Themes - Document generate:ramps can be added to package sc…
b1a0b53 
…ripts
@srcdev
feat: align DisplayPrompt and DisplayToast to shared semantic themes
b3e7de0 
- Introduce `SemanticTheme` ("info" | "success" | "warning" | "error") as the
  single source of truth; `DisplayToastTheme` and `DisplayPromptTheme` are now
  aliases, exported from `~/types/components`
- Rename `DisplayPromptCore` → `DisplayPrompt`, move to `01.atoms/prompt/`
- Delete broken `DisplayPromptError` variant (was passing wrong prop names)
- Move toast from `components/toast/` into `01.atoms/toast/`
- Fix CSS to use semantic slots (`--theme-surface`, `--theme-text`, etc.) so
  both components respond correctly to light/dark mode
- Fix slot-forwarding bug in `DisplayToast` that prevented `config.content.text`
  from rendering when no named slots were provided
- Drop non-semantic themes ("primary", "secondary", "tertiary", "ghost") from
  both components — all four values now map to real CSS palette selectors
- Add Storybook stories and Vitest tests for both components (64 tests total)
- Add `.claude/skills` docs for `DisplayToast` and `DisplayPrompt`
@vercel

vercel Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
srcdev-design-system Ready Ready Preview, Comment Jun 11, 2026 8:41pm
srcdev-design-system-storybook Ready Ready Preview, Comment Jun 11, 2026 8:41pm

@srcdev
srcdev requested a review from Copilot June 11, 2026 20:40
Copilot AI reviewed Jun 11, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR reinstates and modernizes the project’s light/dark theming by replacing hand-authored theme blocks with a generated OKLCH colour ramp system, then aligning component styling to semantic theme slots and simplifying component theme variants.

Changes:

  • Add a parametric OKLCH ramp generator (generate-ramps, check-ramps) and a consumer-facing ramp generator for downstream apps.
  • Introduce semantic theme slots (e.g. --theme-surface, --theme-text, --theme-border, --theme-ring) driven by light-dark() and ramp params (--theme-hue, --theme-chroma).
  • Consolidate DisplayPrompt / DisplayToast onto a shared SemanticTheme (info|success|warning|error), add Storybook + Vitest coverage, and remove legacy prompt variants/core.

Reviewed changes

Copilot reviewed 75 out of 78 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
scripts/generate-ramps.mjs Generates per-palette step CSS, palette param vars, and the parametric --colour-theme-* formula file.
scripts/generate-consumer-ramps.mjs Allows consuming apps to generate compatible ramps from their own ramps.config.mjs.
scripts/check-ramps.mjs CI guard to ensure generated ramp/theme files are committed and up-to-date.
ramps.config.mjs Single source of truth for lightness curve, chroma multipliers, and named palettes (incl. drift).
package.json Adds ramp scripts and ensures ramps regenerate before dev/build/generate.
nuxt.config.ts Regenerates ramps on ramps.config.mjs changes during standalone local dev.
README.md Documents the ramp system, semantic slots, and consumer setup workflow.
app/types/components/semantic-theme.d.ts Adds shared SemanticTheme union type.
app/types/components/index.ts Re-exports new types (SemanticTheme, DisplayPrompt types).
app/types/components/display-toast.d.ts Narrows toast theme type to SemanticTheme.
app/types/components/display-prompt.d.ts Adds DisplayPrompt public prop/type surface.
app/components/01.atoms/prompt/DisplayPrompt.vue New prompt component using semantic slots + semantic theme variants.
app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts Adds unit tests for prompt rendering, slots, and dismiss behaviour.
app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts Adds Storybook stories for semantic themes and behaviour.
app/components/01.atoms/toast/DisplayToast.vue Updates toast defaults/slots/theming to semantic slots and semantic themes.
app/components/01.atoms/toast/molecules/DefaultToastContent.vue Aligns default toast content visuals/icons to semantic slots + theme union.
app/components/01.atoms/toast/tests/DisplayToast.spec.ts Adds unit tests for toast rendering, ARIA, positioning, dismiss, and slots.
app/components/01.atoms/toast/stories/DisplayToast.stories.ts Updates stories to semantic themes and new prompt integration naming.
app/components/display-tooltip/DisplayTooltip.vue Switches from button-specific theme vars to semantic theme slots.
app/components/display-theme-switch/DisplayThemeSwitch.vue Updates borders/outlines to semantic slot tokens.
app/components/05.forms/triple-toggle-switch/TripleToggleSwitchCore.vue Updates form control styling to semantic border/ring tokens.
app/components/05.forms/toggle-switch/ToggleSwitchCore.vue Updates switch styling to semantic tokens (border/ring/surface/text).
app/components/05.forms/pending-effect/PendingEffect.vue Aligns pending effect colours to semantic slots.
app/components/05.forms/input-textarea/InputTextareaCore.vue Updates outlines/borders to semantic border/ring tokens.
app/components/05.forms/input-text/InputTextCore.vue Updates outlines/borders to semantic border/ring tokens.
app/components/05.forms/input-text/variants/InputTextAsNumberWithLabel.vue Updates button split borders to semantic border token.
app/components/05.forms/input-select/InputSelectCore.vue Updates borders/outlines and caret colour to semantic border token.
app/components/05.forms/input-number/InputNumberCore.vue Aligns input surface/border styling to semantic input + border tokens.
app/components/05.forms/input-copy/InputCopyCore.vue Updates borders/hover/focus colours to semantic slots.
app/components/05.forms/input-checkbox-radio/InputCheckboxRadioCore.vue Updates checkbox/radio border/outline/icon colours to semantic tokens.
app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue Updates button variant border/outline/label/decorator tokens.
app/components/05.forms/input-button/InputButtonCore.vue Re-maps button variants to semantic surface/text/border/ring slots.
app/components/02.molecules/action-menu/ActionMenu.vue Updates focus outline token to semantic ring.
app/components/02.molecules/action-menu/ActionMenuItemCore.vue Updates focus outline token to semantic ring.
app/components/display-prompt/DisplayPromptCore.vue Removes legacy core prompt implementation.
app/components/display-prompt/variants/DisplayPromptError.vue Removes legacy non-semantic error variant component.
app/assets/styles/setup/index.css Extends layer ordering to include a consumer layer.
app/assets/styles/setup/01.config/_head.css Re-enables color-scheme: light dark and explicit .light / .dark overrides.
app/assets/styles/setup/02.colours/index.css Imports generated palette params before named ramp files.
app/assets/styles/setup/02.colours/_theme-params.css Generated palette param vars (--palette-*-hue/chroma/drift).
app/assets/styles/setup/02.colours/_blue.css Converts blue ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_red.css Converts red ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_green.css Converts green ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_amber.css Converts amber ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_orange.css Converts orange ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_sunset.css Converts sunset ramp to generated OKLCH step values with drift (00–10).
app/assets/styles/setup/02.colours/_slate.css Converts slate ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/03.theming/index.css Switches theming entrypoint to ramp formula + semantic slots + palette selectors.
app/assets/styles/setup/03.theming/theme-ramp.css Generated parametric --colour-theme-0..10 formula and legacy aliases.
app/assets/styles/setup/03.theming/_theme-slots.css Adds semantic theme slots derived from the ramp via light-dark().
app/assets/styles/setup/03.theming/_default.css Sets default palette params and updates global/page-level tokens to light-dark().
app/assets/styles/setup/03.theming/_error.css Sets error palette params + preserves error-specific form tokens.
app/assets/styles/setup/03.theming/_success.css Sets success palette params.
app/assets/styles/setup/03.theming/_warning.css Sets warning palette params, hue drift, and adjusts surface intensity.
app/assets/styles/setup/03.theming/default/index.css Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/default/_light.css Removes old hardcoded default theme values.
app/assets/styles/setup/03.theming/default/_dark.css Removes old hardcoded default theme values.
app/assets/styles/setup/03.theming/error/index.css Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/error/_light.css Removes old hardcoded error theme values.
app/assets/styles/setup/03.theming/error/_dark.css Removes old hardcoded error theme values.
app/assets/styles/setup/03.theming/success/index.css Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/success/_light.css Removes old hardcoded success theme values.
app/assets/styles/setup/03.theming/success/_dark.css Removes old hardcoded success theme values.
app/assets/styles/setup/03.theming/warning/index.css Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/warning/_light.css Removes old hardcoded warning theme values.
app/assets/styles/setup/03.theming/warning/_dark.css Removes old hardcoded warning theme values.
app/assets/styles/setup/04.elements/forms/00.element-defaults.css Removes unused commented default element reset block.
app/pages/ui/display-prompt.vue Updates demo page to use DisplayPrompt instead of legacy core variants.
app/pages/ui/display-toast.vue Updates prompt embedding inside toasts to use DisplayPrompt.
app/pages/ui/settings.vue Updates UI test content to exercise data-theme ramp behaviour.
app/pages/ui/mask-element.vue Tweaks mask demo colours/sizing to match new ramps.
.vscode/srcdev-nuxt3-display-prompt-component.code-snippets Updates snippet to reference DisplayPrompt (but still needs API alignment fixes).
.claude/skills/theming-colour-ramps.md Adds detailed architecture doc for ramps + semantic slots + drift.
.claude/skills/theming-override-default.md Updates consumer guidance to new hue/chroma + generator workflow.
.claude/skills/theming-partial-override.md Updates partial override guidance to semantic-slot based theming.
.claude/skills/index.md Adds new theming skills and new component skills (toast/prompt).
.claude/skills/components/display-toast.md Adds component usage + slot forwarding + ARIA documentation.
.claude/skills/components/display-prompt.md Adds component usage + dismiss behaviour + theme docs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread scripts/check-ramps.mjs Outdated
Comment thread scripts/generate-ramps.mjs Outdated
Comment thread scripts/generate-consumer-ramps.mjs Outdated
Comment thread app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts Outdated
Comment thread app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts Outdated
Comment thread .vscode/srcdev-nuxt3-display-prompt-component.code-snippets
@srcdev
srcdev merged commit 90be68b into main Jun 11, 2026
3 checks passed
@srcdev
srcdev deleted the reinstate-modern-light-dark branch June 11, 2026 20:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@srcdev